<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蘑菇街商城--购物车页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/cartlist.css">
    <script src="./script/main.js" type="module" id="cartlist"></script>
</head>

<body>
    <!-- 顶部区域结构 -->
    <header>
        <!-- 头部导航区域 -->
        <div class="h_nav">
            <div class="container">
                <div class="h_content">
                    <a href="index1.html" class="nav_item"><i></i>首页</a>
                    <a href="" class="nav_item" target="_blank"><i></i>商城</a>
                    <a href="" class="nav_item" target="_blank">我的订单</a>
                    <div class="h_about nav_item" target="_blank">关于我们<i class="icon_down"></i></div>
                </div>
            </div>
        </div>
        <!-- 头部主体区域 -->
        <div class="h_con">
            <div class="container clearfix">
                <a href="javascript:;" id="top_logo" title="蘑菇街首页" class="fl">
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="蘑菇街，我的买手街">
                </a>
                <div class="h_category fl">
                    <i></i> 目录
                </div>
                <div class="search_content fl">
                    <!-- 搜索框 -->
                    <div class="h_search fl">
                        <form action="" method="get" class="top_nav_form clearfix">
                            <input type="text" placeholder="连衣裙" class="sc_text fl">
                            <input type="submit" class="sc_btn fl" value="">
                        </form>
                        <div class="top_nav_tip">
                            <ul></ul>
                        </div>
                    </div>

                    <!-- 导航信息 -->
                    <div class="h_news fl">
                        <!-- 消息 -->
                        <div class="top_news">
                            <a href="javascript:;" class="news">
                                <i></i>
                                <span>消息</span>
                            </a>
                            <a href="javascript:;" class="collection">
                                <i></i>
                                <span>收藏</span>
                            </a>
                            <a href="cartlist.html" class="buycar">
                                <i></i>
                                <span>购物车</span>
                            </a>
                        </div>
                    </div>

                    <!-- 登录注册以及用户信息和退出 -->
                    <div class="h_inform fl">
                        <a href="./registry.html" class="register" style="display: none;">
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png" alt=""> 注册
                        </a>
                        <a href="./login.html" style="display: none;" class="login">
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png" alt=""> 登录
                        </a>
                        <span class="username">
                            <strong>欢迎您!!!</strong>
                            <i></i>
                        </span>
                        <a href="javascript:;" class="backlogin">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 购物车具体内容区域结构 -->
    <div class="container">
        <!-- 头部tab选项卡区域 -->
        <div class="cart_head">
            <ul>
                <li class="fl select">
                    <a href="javascript:;">全部商品 <span class="num">1</span></a>
                </li>
                <li class="fl">
                    <a href="javascript:;">优惠 <span>1</span></a>
                </li>
                <li class="fl">
                    <a href="javascript:;">库存紧张 <span>0</span></a>
                </li>
            </ul>
        </div>
        <!-- 购物车主体内容区域 -->
        <section class="main_cart">
            <!-- 主体头部区域 -->
            <div class="main_head">
                <ul class="clearfix">
                    <li class="all_select">
                        <input type="checkbox" name="" id="s_all" checked>
                        <label for="s_all">全选</label>
                    </li>
                    <li class="goods_info">商品信息</li>
                    <li class="good_price">单价(元)</li>
                    <li class="good_num">数量</li>
                    <li class="good_count">小计</li>
                    <li class="operate">操作</li>
                </ul>
            </div>

            <!-- 商家信息区域 -->
            <div class="shop_info">
                <input type="checkbox" checked>
                <a href="javascript:;" class="shop_name">石头记stone</a>
                <a href="javascript:;" class="shop_contact"></a>
            </div>

            <!-- 商品购买详情信息区域 -->
            <div class="cart_item">
            </div>

            <!-- 需要渲染拷贝的商品数据结构 -->
            <ul class="clearfix databox" style="display: none;">
                <li class="item_check">
                    <input type="checkbox" class="s_item" checked>
                </li>
                <li class="desc clearfix">
                    <a href="javascript:;"><img src="" alt=""></a>
                    <div class="item_info">
                        <a href="javascript:;"> </a>
                        <p>跨店每满100减10</p>
                    </div>
                </li>
                <li class="good_detail">
                    <p class="good_color">颜色: 88蓝色</p>
                    <p class="good_size">尺码: L</p>
                </li>
                <li class="good_sales">
                    <p class="item_price"></p>
                    <p class="item_focus">火热促销</p>
                </li>
                <li class="sale_num">
                    <div>
                        <span class="num_reduce"></span>
                        <input type="text" value="1" class="input_num">
                        <span class="num_add"></span>
                    </div>
                </li>
                <li class="item_count">
                    <p class="item_sum"></p>
                </li>
                <li class="item_edit">
                    <a href="javascript:;" class="good_del">删除</a>
                </li>
            </ul>

            <!-- 购物总数和总价区域 -->
            <div class="cart_paybar">
                <div class="sd_cart fl">
                    <input type="checkbox" name="" id="all_s" checked>
                    <label for="all_s">全选</label>
                    <a href="javascript:;" class="remove_all">删除</a>
                    <a href="javascript:;" class="del_select">清空选中商品</a>
                    <a href="javascript:;">移入收藏夹</a>
                </div>
                <a href="javascript:;" class="gopay fr">去付款</a>
                <div class="cart_money fr">¥ 0.00</div>
                <div class="paybar_info fr">
                    共有 <span class="count">0</span> 件商品, 共计:
                </div>
            </div>
        </section>
    </div>


    <!-- 底部区域结构 -->
    <footer class="foot">
        <div class="container">
            <div class="f_conbox">
                <!-- 底部图标 -->
                <div class="f_icon">
                    <a href="javascript:;">
                        <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png" alt="">
                    </a>
                </div>
                <!-- 底部帮助栏目 -->
                <div class="f_help clearfix">
                    <dl class="fl">
                        <dt>新手帮助
                            <p class="f_help_border"></p>
                        </dt>
                        <dd>
                            <a href="javascript:;">常见问题</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">自动服务</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">联系客服</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">意见反馈</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>权益保障
                            <p class="f_help_border"></p>
                        </dt>
                        <dd>
                            <a href="javascript:;">全国包邮</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">7天无理由退货</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">退货运费补贴</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">限时发货</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>支付方式
                            <p class="f_help_border"></p>
                        </dt>
                        <dd><a href="javascript:;">微信支付</a></dd>
                        <dd><a href="javascript:;">支付宝</a></dd>
                        <dd><a href="javascript:;">白付美支付</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>移动客户端下载
                            <p class="f_help_border"></p>
                        </dt>
                        <dd><a href="javascript:;">蘑菇街</a></dd>
                        <dd><a href="javascript:;">美丽说</a></dd>
                        <dd><a href="javascript:;">uni引力</a></dd>
                    </dl>
                </div>
                <!-- 底部关于项 -->
                <div class="f_about">
                    <ul>
                        <li>
                            <a href="javascript:;">关于我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">招聘信息</a>
                        </li>
                        <li>
                            <a href="javascript:;">联系我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">商家入驻</a>
                        </li>
                        <li>
                            <a href="javascript:;">商家后台</a>
                        </li>
                        <li>
                            <a href="javascript:;">规则中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">规则众议院</a>
                        </li>
                        <li>
                            <a href="javascript:;">有害信息举报</a>
                        </li>
                        <li>
                            <a href="javascript:;">用户隐私保护</a>
                        </li>
                    </ul>
                </div>
                <!-- 底部商家公司名称 -->
                <div class="footer_hostname"><span>©2020 Mogu.com 杭州卷瓜网络有限公司</span></div>
            </div>
        </div>
    </footer>
</body>

</html>